<template>
    <div class="login-page">
        <!-- <el-button type="primary">Primary</el-button> -->
        <h2 class="title">welcome back</h2>
        <div>
            <span class="line"></span>
            <span>Account password login</span>
            <span class="line"></span>
        </div>
        <el-form ref="formRef" :rules="rules" :model="form">
            <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="Please enter your username">
                    <template #prefix>
                        <el-icon>
                            <user />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="form.password" placeholder="Please enter your password" show-password>
                    <template #prefix>
                        <el-icon>
                            <lock />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button round color="#626aef" class="" type="primary" @click="onSubmit" :loading="loading">Submit</el-button>
            </el-form-item>
        </el-form>
        <!-- <el-input v-model="input" style="width: 240px" placeholder="Please input" />        -->

    </div>
</template>


<script lang="ts" setup>
import { ref, reactive, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
import { toast } from '~/composables/util'
import { useRouter } from 'vue-router'
// import { useStore } from 'vuex'
import axios from "axios"

import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'

import { setUserName, getUserName} from '~/composables/auth'

// const store = useStore()
const router = useRouter()

const app = getCurrentInstance()
const MES_IP = app.appContext.config.globalProperties.$MES_IP

// do not use same name with ref
const form = reactive({
    username: "",
    password: ""
})

const rules = {
    username: [
        {
            required: true,
            message: 'The user name cannot be empty',
            trigger: 'blur'
        },
    ],
    password: [
        {
            required: true,
            message: 'The password cannot be empty',
            trigger: 'blur'
        },
    ]
}

const formRef = ref(null)
const loading = ref(false)
// const onSubmit = () => {
//     formRef.value.validate((valid)=>{
//         if(!valid){
//             return false
//         }
//         loading.value = true

//         store.dispatch("login",form).then(res=>{
//             toast("登录成功")
//             router.push("/")
//         }).finally(()=>{
//             loading.value = false
//         })
//     })
// }

const onSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            return false
        }
        loading.value = true

        // store.dispatch("login",form).then(res=>{
        //     toast("登录成功")
        //     router.push("/")

        console.log(form.username);
        console.log(form.password);
        axios.post(MES_IP + "/graphdb/login", {
            "root": "line-one",
            "usn": form.username,
            "pass": form.password
        })
            .then(function (response) {
                console.log("请求成功")
                console.log(response)

                toast("登录成功")
                console.log("getUserName",getUserName());
                
                setUserName(form.username)
                console.log("getUserName",getUserName());

                router.push("/")

            }, function (err) {
                console.log("请求失败")
                console.log(err)
                loading.value = false

                ElMessageBox.alert('Please check whether the user name or password is correct', 'Warning', {
                    // if you want to disable its autofocus
                    // autofocus: false,
                    confirmButtonText: 'OK',
                    callback: (action: Action) => {
                        ElMessage({
                            type: 'warning',
                            message: `action: ${action}`,
                        })
                    },
                })
            })




    })
}

// 监听回车事件
function onKeyUp(e) {
    if (e.key == "Enter") onSubmit()
}

// 添加键盘监听
onMounted(() => {
    document.addEventListener("keyup", onKeyUp)
})
// 移除键盘监听
onBeforeUnmount(() => {
    document.removeEventListener("keyup", onKeyUp)
})

const input = ref('')

</script>
<style lang="scss">
#app {
    display: block;
    border-radius: 10px;
    @apply bg-sky-800;
}

body{
    @apply bg-sky-700;
}

.login-page {
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
}
</style>